<template>
  <div class="task-table">
    <el-input 
      style="width:180px;margin:0 0 12px auto;display:block;"
      v-model="keyword" 
      prefix-icon="el-icon-search"
      clearable
      :placeholder="$t('common.form.preview.relateTask.pla1')"
      @input="inputChange">
    </el-input>

    <el-table
      :data="taskList"
      border
      header-row-class-name="common-list-table-header__v2"
      row-class-name="customer-event-table-row"
      header-cell-class-name="table-title"
      style="width: 100%"
    >
      <el-table-column
        prop="taskNo"
        :label="$t('common.form.type.taskNo')">
        <template slot-scope="scope">
          <div
            class="view-detail-btn"
            @click="openTaskTab(scope.row)"
          >
            {{ scope.row.taskNo }}
          </div>
        </template>
      </el-table-column>

      <el-table-column
        prop="templateName"
        :label="$t('common.label.taskTemplate')">
      </el-table-column>

      <el-table-column
        prop="state"
        :label="$t('common.task.taskState')">
        <template slot-scope="scope">
          <div
            class="task-state-block task-font12 table-blacklist"
            v-if="scope.row.attribute && scope.row.attribute.lastPassedNodeStateName"
            style="
              color: #FFF;
              background-color: rgb(255, 145, 0);
            "
          >
            {{scope.row.attribute.lastPassedNodeStateName}}
          </div>
          <div
            v-else
            class="task-state-block task-font12 table-blacklist"
            :style="{
              color: '#FFF',
              backgroundColor: scope.row.isPaused == 1 ? rgba(255, 77, 79, 1) : taskStateEnum.getBgColor( scope.row.state,1)
            }"
          >
            {{ scope.row.isPaused == 1 ? $t('task.list.paused') : taskStateEnum.getName(scope.row.state)}}
          </div>
        </template>
      </el-table-column>
      <el-table-column
        prop="executorName"
        :label="$t('common.label.principalName')">
        <template slot-scope="scope">
          <template v-if="isOpenData">
            <open-data v-if="scope.row.executorUser" type="userName" :openid="scope.row.executorUser.staffId"></open-data>
          </template>  
          <template v-else> 
            {{ scope.row.executorUser && scope.row.executorUser.displayName }}
          </template>
        </template>
      </el-table-column>

      <el-table-column
        prop="createTime"
        :label="$t('common.time.processTime.createTime')">
        <template slot-scope="scope">
          {{ scope.row.createTime | fmt_datetime }}
        </template>
      </el-table-column>

      <el-table-column
        prop="updateTime"
        :label="$t('common.time.processTime.completeTime')">
        <template slot-scope="scope">
          {{ scope.row.updateTime | fmt_datetime }}
        </template>
      </el-table-column>
    </el-table>

    <el-pagination
      v-if="total"
      style="text-align:right;margin-top:20px;"
      background
      @current-change="currentChange"
      @size-change="handleSizeChange"
      :page-size="page.pageSize"
      :current-page="page.pageNum"
      layout="prev, pager, next, sizes, jumper"
      :total="total"
    >
    </el-pagination>
  </div>
</template>
          
<script>
import taskStateEnum from '@model/enum/TaskStateEnum.ts';
import { isOpenData, openAccurateTab } from '@src/util/platform';

import { PageRoutesTypeEnum } from 'pub-bbx-global/pageType/dist/enum/PageRoutesEnum'

import AuthMixin from '@src/mixins/authMixin';
export default{
  // 故障对象/故障描述和故障解决方案的tab栏 故障工单记录和工单的tab
  name:'TaskTable',
  
  mixins: [AuthMixin],

  data(){
    return {
      taskStateEnum,
      isOpenData,

      page:{
        pageSize: 10,
        pageNum: 1,
      },
      keyword:''
    }
  },
    
  props:{
    taskList:{
      type: Array
    },

    total:{
      type: Number
    }
  },

  methods:{
    /**
     * @description 打开工单详情tab
     * @param {String} taskId 工单id
     */
    openTaskTab({taskUUID, taskNo}) {
      if (!taskUUID) return;
      
      if (!this.globalIsHaveTaskViewDetailAuth) return

      let fromId = window.frameElement.getAttribute('id');

      openAccurateTab({
        type: PageRoutesTypeEnum.PageTaskView,
        key: taskUUID,
        titleKey: taskNo,
        params: 'canViewTask=1',
        fromId
      })
    },

    getParams(){
      return {
        ...this.page,
        taskNo: this.keyword
      }
    },

    currentChange(pageNum){
      this.page.pageNum = pageNum
      this.$emit('getData', this.getParams())
    },

    handleSizeChange(pageSize){
      this.page.pageNum = 1
      this.page.pageSize = pageSize
      this.$emit('getData', this.getParams())
    },

    inputChange(){
      this.$emit('getData', this.getParams())
    }
  }
      
}
</script>


<style lang="scss" scoped>

@import './table.scss'
</style>